<template>
  <div>
    <NavBar :title="userInfo.nickName" />
    <div class="user_box">
      <div class="user_msg">
        <img class="user_head" src="@/assets/imgs/myLove.png" alt="" />
        <div class="user_msg_list">
          <div class="user_list_item">昵称 :{{ userInfo.nickName }}</div>
          <div class="user_list_item">手机号 :{{ userInfo.loginName }}</div>
          <div class="user_list_item">
            个性签名 :{{ userInfo.introduceSign }}
          </div>
        </div>
      </div>
      <van-cell @click="handNav('/order')" title="我的订单" is-link />
      <van-cell @click="handNav('/site')" title="地址管理" is-link />
      <van-cell @click="handLogout" title="退出登录" is-link />
      <!-- <van-cell title="关于我们" is-link /> -->
    </div>
    <Tabber />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import NavBar from "@/components/NavBar.vue";
import Tabber from "@/components/Tabber.vue";
import { getUserInfo, logout } from "@/utils/apis/userApi";
import storage from "@/utils/storage";
import { useRouter } from "vue-router";
import { Dialog, Toast } from "vant";
export default defineComponent({
  name: "my",
  components: {
    NavBar,
    Tabber,
  },
  setup() {
    const state = reactive({
      userInfo: {},
    });
    const router = useRouter();
    onMounted(async () => {
      const res = await getUserInfo();
      state.userInfo = res.data;
      console.log(res);
    });
    const handNav = (url: string) => {
      router.push({
        path: url,
        query: {
          isOrderMy: url,
        },
      });
    };
    const handLogout = async () => {
      Dialog.confirm({
        title: "退出登录",
        message: "这就走了?",
        beforeClose: async (action) => {
          console.log(action);
          new Promise((resolve: (arg0: boolean) => void) => {
            if (action === "confirm") {
              logout();
              storage.remove("token");
              Toast.success("退出登录");
              setTimeout(() => {
                router.replace({ path: "/" });
              }, 2000);
              Dialog.close();
              resolve(true);
            } else {
              Dialog.close();
              resolve(false);
            }
          });
        },
      });
    };
    return { ...toRefs(state), handNav, handLogout };
  },
});
</script>
<style lang="scss" scopen>
.user_box {
  .user_msg {
    width: 94%;
    margin: 0 auto;
    height: 115px;
    background: linear-gradient(90deg, #1baeae, #51c7c7);
    box-shadow: 0 0.05333rem 0.13333rem #269090;
    border-radius: 12px;
    margin-top: 20px;
    display: flex;
    padding: 30px;
    box-sizing: border-box;
    margin-bottom: 40px;
    .user_msg_list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user_list_item {
        font-size: 14px;
        color: #fff;
      }
    }
    .user_head {
      border-radius: 50%;
      margin-right: 20px;
      width: 60px;
      height: 60px;
    }
  }
}
</style>
